<template>
	<view class="container rent-detail">
		<view class="detail-top">
			<swiper class="swiper-panel" circular :autoplay="true" :interval="5000" :duration="500"
				v-if="pageTopType==='img'">
				<swiper-item>
					<view class="swiper-item">
						<image class="banner-img" :src="$resFileUrl+detailInfo.rentLandImg" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="video-panel" v-else>
				<video class="banner-img" :src="$resFileUrl+detailInfo.rentLandVideo" v-if="detailInfo.rentLandVideo"></video>
				<view  class="video-null" v-else>暂无视频</view>
				<!-- <text class="iconfont">&#xe631;</text>
				<image class="banner-img" :src="$fileUrl+'banner.png'" mode="aspectFill"></image> -->
			</view>
			<view class="top-btn-box">
				<view class="yuan-btn " :class="pageTopType==='video'?'btn-success':'btn-default'"
					@click="pageTopType='video'">视频</view>
				<view class="yuan-btn " :class="pageTopType==='img'?'btn-success':'btn-default'"
					@click="pageTopType='img'">图片</view>
			</view>
		</view>
		<view class="data-content">
			<view class="list-title">
				<view class="list-title-words">{{detailInfo.rentLandName}}</view>
				<!-- <view class="list-price-unit c-danger">￥</view>
				<view class="list-price c-danger">100元起</view> -->
			</view>
			<view class="list-info">{{detailInfo.rentLandDesc}}</view>
			<view class="land-addr" @click="clickOpenMap">
				<text class="iconfont addr-ico">&#xe636;</text>
				<text>{{detailInfo.landName}}</text>
				<text class="iconfont more-ico">&#xe613;</text>
			</view>
			<view class="select-panel">
				<view class="select-title">
					<view class="sel-title-words">选择土地</view>
					<view class="sel-title-tips">
						<text>剩余</text>
						<text class="c-success">{{detailLandList.filter(item=>item.status==='0').length}}</text>
						<text>/{{detailLandList.length}}</text>
					</view>
				</view>
				<view class="select-type">
					<view class="sel-type-list">
						<view class="scale-box">
							<image class="land-type-img" :src="$fileUrl+'land-r-1.png'" mode="widthFix"></image>
						</view>

						<text>可选</text>
					</view>
					<view class="sel-type-list">
						<view class="scale-box">
							<image class="land-type-img" :src="$fileUrl+'land-r-2.png'" mode="widthFix"></image>
						</view>
						<text>选中</text>
					</view>
					<view class="sel-type-list">
						<view class="scale-box">
							<image class="land-type-img" :src="$fileUrl+'land-r-3.png'" mode="widthFix"></image>
						</view>
						<text>已租</text>
					</view>
				</view>
				<view class="land-list-box">
					<view class="land-list" v-for="(item,idx) in detailLandList" @click="selectGarden(item)"
						:key="item.seqCode">
						<image class="land-list-img" :src="$fileUrl+'land-r-3.png'" mode="scaleToFill"
							v-if="item.status==='1'"></image>

						<image class="land-list-img" :src="$fileUrl+'land-r-2.png'" mode="scaleToFill"
							v-else-if="selectLand===item.seqCode"></image>
						<image class="land-list-img" :src="$fileUrl+'land-r-1.png'" mode="scaleToFill"
							v-else-if="selectLand!==item.seqCode"></image>
						<view class="land-area">{{item.gardenArea}}㎡</view>
						<view class="land-name no-warp">{{item.gardenName}}</view>
					</view>
				</view>

			</view>
			<view class="select-panel yuan-form">
				<view class="select-title not-line yuan-form-list rent-period">
					<view class="sel-title-words">租赁周期</view>
					<view class="rent-period-row">
						<picker class="setting-picker" mode="selector" :range="cycleArr"
							@change="cycleChange">
							<view class="rent-picker">
								<view class="yuan-input picker-input c-danger" v-if="formData.cycle">{{formData.cycle}}
								</view>
								<view class="yuan-input picker-input placeholder-style" v-else>请选择租赁周期</view>
								<text class="iconfont">&#xe613;</text>
							</view>

						</picker>
						<text class="iconfont">年</text>
					</view>

				</view>
			</view>
			<view class="select-panel">
				<view class="select-title">
					<view class="sel-title-words">地块服务</view>
					<!-- <view class="sel-title-tips" @click="jump('/pages/rent/service')">了解特权<i
							class="iconfont">&#xe775;</text></view> -->
				</view>
				<view class="service-box">
					<view class="service-list" :class="selectServiceId===item.serviceId&&'service-list-active'"
						@click="selectService(item)" v-for="item in serviceList" :key="item.serviceId">
						<view class="service-title">{{item.serviceName}}</view>
						<view class="service-price">
							<text class="service-price-unit">￥</text>
							<text>{{item.servicePrize}}/天</text>
						</view>
						<view class="service-info">{{item.serviceDesc}}</view>
					</view>
				</view>
			</view>
			<view class="select-panel">
				<view class="select-title">
					<view class="sel-title-words">种子列表</view>
					<view class="sel-title-tips" @click="jump('/pages/rent/seed')">查看全部<text
							class="iconfont">&#xe775;</text>
					</view>
				</view>
				<view class="seed-box">
					<view class="seed-list" v-for="item in seedList" :key="item.id">
						<image class="seed-img" :src="$resFileUrl+item.germplasmImg" mode="aspectFill"></image>
						<view class="seed-right">
							<view class="seed-title">
								{{item.germplasmName}}
								<text class="seed-title-tips">预估产量:{{item.productAmount}}</text>
							</view>
							<view class="seed-tips no-warp">{{item.remark}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="select-panel land-detail-panel">
				<view class="select-title">
					<view class="sel-title-words">土地详情</view>
				</view>
				<view  class="rich-box">
					<rich-text :nodes="detailInfo.detail"></rich-text>
				</view>
				
				<!-- <image class="land-detail-img" :src="$fileUrl+'land-detail.png'" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="activity-action">
			<view class="left-action" @click="jumpIndex">
				<text class="iconfont">&#xe601;</text>
				<view>首页</view>
			</view>
			<view class="left-action">
				<button class="share-btn" open-type="share">
					<text class="iconfont">&#xebab;</text>
					<view>分享</view>
				</button>
			</view>
			<view class="left-action ">
				<text class="iconfont">&#xec2e;</text>
				<view>客服</view>
			</view>
			<view class="flex-grow"></view>
			<view class="yuan-btn btn-success" @click="clickSure" v-if="onlyShow!=='true'">立即租赁</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import api from '@/common/api';
	import { getStorage, hideLoading, showLoading, showToast, utilLogin } from '@/common/util';
	import { onLoad } from "@dcloudio/uni-app"
	import commonStore from '../../store/commonStore';

	const pageTopType = ref('img')
	const isLoading = ref(false)
	const selectLand = ref(0)
	const cycleArr = [1,2,3]
	const detailInfo = ref<any>({})
	const formData = reactive<any>({
		cycle:1
	})
	const pageId = ref('')
	const onlyShow = ref('')
	onLoad((options) => {
		pageId.value = options.id;
		onlyShow.value=options.onlyShow||''
	})
	onMounted(async () => {
		const promise = new Promise(resolve => {
			setTimeout(() => {
				resolve({
					title: detailInfo.value.introduce,
					path: '/pages/index/index?shareType=rent&shareId=' + detailInfo.value.id
				})
			}, 2500)
		})
		//朋友
		onShareAppMessage(() => {
			return {
				title: '果园认养',
				path: '/pages/index/index?shareType=rent&shareId=' + detailInfo.value.id,
				promise
			}
		})
		//朋友圈
		onShareTimeline(() => {
			return {
				promise,
				title: '果园认养',
				path: '/pages/index/index?shareType=rent&shareId=' + detailInfo.value.id
			}
		});
		getLandList()
		getDetail()
		getServiceList()
		getSeedList()
	})
	const getDetail = async () => {
		showLoading()
		try {
			const res = await api.getLandDetail({ id: pageId.value })
			detailInfo.value = res.data || []
		} finally {
			hideLoading()
		}

	}
	const detailLandList = ref([])
	const getLandList = async () => {
		showLoading()
		try {
			const res = await api.getLandDetailList({ rentLandId: pageId.value })
			detailLandList.value = res.data || []
		} finally {
			hideLoading()
		}

	}

	const serviceList = ref([])
	const getServiceList = async () => {
		showLoading()
		try {
			const res = await api.getServiceList({ rentLandId: pageId.value })
			serviceList.value = res.data || []
			selectServiceId.value = res.data[0]?.serviceId || ''
		} finally {
			hideLoading()
		}

	}
	const seedList = ref([])
	const getSeedList = async () => {
		showLoading()
		try {
			const res = await api.getSeedList({ pageNum: 1, pageSize: 6 })
			seedList.value = res.rows || []
		} finally {
			hideLoading()
		}

	}
	const cycleChange = (e : any) => {
		formData.cycle = cycleArr[e.detail.value]
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const clickOpenMap = () => {
		const a = detailInfo.value.landPath ? detailInfo.value.landPath.split(',') : [0, 0]
		wx.openLocation({
			latitude: a[0],
			longitude: a[1],
			scale: 18
		})
	}
	const selectGarden = (item) => {
		if (item.status === '1') return
		selectLand.value = item.seqCode
	}
	const selectServiceId = ref('')
	const selectService = (item) => {
		if (item.serviceId === selectServiceId.value) return
		selectServiceId.value = item.serviceId
	}
	const clickSure = () => {
		if(!selectLand.value){
			showToast('请选择租赁的土地')
			return
		}
		//把当前选择的菜园保存下来
		const selectLandObj = detailLandList.value.find((item) => {
			return item.seqCode === selectLand.value
		})
		selectLandObj.protocol=detailInfo.value.protocol
		commonStore.commit('setSelLandObj', selectLandObj)

		// 没有登录 提示登录
		let userAuth = getStorage('userAuth') || {}
		if (userAuth.userToken) {
			jump('/pages/rent/sure?landName=' + detailInfo.value.rentLandName + '&id=' + pageId.value + '&cycle=' + formData.cycle + '&serviceId=' + selectServiceId.value)
		} else {
			utilLogin((loginType : boolean) => {
				if (loginType) {
					//登录成功
					jump('/pages/rent/sure?landName=' + detailInfo.value.rentLandName + '&id=' + pageId.value + '&cycle=' + formData.cycle + '&serviceId=' + selectServiceId.value)
				}
			})
		}

	}
	const jumpIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss">
	.rent-detail {
		padding-bottom: 120rpx;

		.detail-top {
			position: relative;
		}

		.swiper-panel {
			height: 440rpx;
		}

		.video-panel {
			height: 440rpx;
			position: relative;

			.iconfont {
				font-size: 88rpx;
				color: #fff;
				position: absolute;
				z-index: 10;
				display: flex;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;
			}
		}

		.banner-img {
			width: 100%;
			height: 440rpx;
		}

		.top-btn-box {
			position: absolute;
			left: 0;
			bottom: 15rpx;
			width: 100%;
			padding: 20rpx;
			z-index: 11;

			.yuan-btn {
				display: inline-flex;
				width: 130rpx;
				height: 62rpx;
				border-radius: 62rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
			}
		}

		.data-content {
			padding: 0 25rpx;
			margin-top: 30rpx;
		}

		.list-title {
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.list-title-words {
			flex-grow: 1;
		}

		.list-info {
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 30rpx;
		}

		.list-price-unit {
			font-size: 24rpx;
		}


		.land-addr {
			font-size: 28rpx;
			color: #148AF4;
			padding: 35rpx 0;

			.addr-ico {
				margin-right: 10rpx;
				color: #8F8F8F
			}

			.more-ico {
				transform: rotate(-90deg);
				display: inline-block;
				margin-left: 10rpx;
			}
		}

		.select-panel {
			background-color: #fff;
			border-radius: 14rpx;
			padding: 0 20rpx 20rpx 20rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
		}

		.select-title {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: solid 1px #C8C8C8;
		}

		.not-line {
			border-bottom: unset;
			padding-bottom: 0;
		}

		.sel-title-words {
			flex-grow: 1;
			font-size: 34rpx;
			color: #232323;
			font-weight: bold;
		}

		.sel-title-tips {
			color: #5B5B5B;
			font-size: 26rpx;
		}

		.select-type {
			padding: 15rpx 0;
			display: flex;
			align-items: center;
		}

		.sel-type-list {
			display: flex;
			align-items: center;
			margin-right: 80rpx;
			font-size: 26rpx;
			color: #232323;
		}

		.sel-type-list:last-child {
			margin-right: 0;
		}

		.scale-box {
			margin-right: 10rpx;
		}

		.land-type-img {
			height: 80rpx;
			width: 80rpx;
		}

		.land-list-box {
			margin-top: 30rpx;
		}

		.land-list {
			display: inline-block;
			width: 33.3%;
			text-align: center;
		}

		.land-list-scale {}

		.land-list-img {
			height: 50rpx;
			width: 100rpx;
			display: inline-block;
		}

		.land-area,
		.land-name {
			font-size: 26rpx;
			color: #5B5B5B;
		}

		.service-box {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}

		.service-list {
			width: 49%;
			text-align: center;
			background-color: #F9F9F9;
			border-radius: 8rpx;
			padding: 20rpx 0;
			border: solid 2px #F9F9F9;
		}

		.service-list-active {
			border: solid 2px #17CC77;
		}

		.service-title {
			font-size: 26rpx;
			color: #232323;
		}

		.service-price {
			font-size: 30rpx;
			color: #FF5F56;
			font-weight: bold;
			margin-top: 10rpx;
		}

		.service-price-unit {
			font-size: 24rpx;
			font-weight: lighter;
		}

		.service-info {
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 20rpx;
		}

		.seed-box {
			padding-top: 20rpx;
			font-size: 0;
		}

		.seed-list {
			display: inline-flex;
			width: 100%;
			margin-bottom: 20rpx;
		}

		.seed-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			display: block;
			flex-shrink: 0;
			margin-right: 10rpx;
		}

		.seed-right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			flex-grow: 1;
			width: 100rpx;
		}

		.seed-title {
			font-size: 30rpx;
			color: #232323;
		}

		.seed-title-tips {
			font-size: 24rpx;
			color: #8F8F8F;
		}

		.seed-tips {
			font-size: 26rpx;
			color: #5B5B5B;
		}

		.land-detail-panel {
			padding-left: 0;
			padding-right: 0;
			padding-bottom: 0;

			.select-title {
				padding-left: 20rpx;
			}

			.land-detail-img {
				width: 100%;
				display: block;
				border-radius: 0 0 10rpx 10rpx;
			}
		}


		.activity-action {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
			padding: 0 30rpx;

			.yuan-btn {
				width: 170rpx;
				height: 66rpx;
				border-radius: 66rpx;
			}
		}

		.flex-grow {
			flex-grow: 1;
		}

		.left-action {
			font-size: 24rpx;
			color: #C4C7D0;
			text-align: center;
			margin-right: 30rpx;

			.iconfont {
				font-size: 40rpx;
			}
		}

		.setting-picker {
			flex-grow: 1;
			background: #F9F9F9;
			border-radius: 2px;
			border: 1px solid rgba(0, 0, 0, 0.12);
			padding: 20rpx 20rpx;

			.yuan-input {
				text-align: left;
			}

		}

		.rent-picker {
			display: flex;
			align-items: center;
		}

		.rent-period {
			display: block;
			height: unset;

		}

		.rent-period-row {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.iconfont {
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.share-btn {
			font-size: 24rpx;
			background-color: transparent;
			color: #C4C7D0;
			line-height: unset;
			padding-left: 0;
			padding-right: 0;
		}

		.share-btn::after {
			border: none
		}
		.rich-box{
			padding: 20rpx;
		}
		
		.video-null{
			padding: 50rpx 0;
			text-align: center;
			color: #999;
		}
	}
</style>